import React from "react"

const Recovery = () => {

    // 初始化表单对象
    const [form] = React.$Vant.Form.useForm()

    // 初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    // 厂家的信息
    const [factory, setFactory] = React.useState({})

    // 显示物流公司弹出框
    const [expshow, setExpshow] = React.useState(false)

    // 物流公司名称
    const [expname, setExpname] = React.useState('')

    // 物流公司数据
    const [express, setExpress] = React.useState([])

    // 默认选择的物流
    const [index, setIndex] = React.useState(0)

    const [buscode, setBuscode] = React.useState('')
    const [busexpid, setBusexpid] = React.useState(0)

    // 获取订单id
    const [searchParams] = React.$Router.useSearchParams()
    const [id, setId] = React.useState(searchParams.get('id'))

    // ref对象
    let picker = React.useRef()

    // 选择了物流的确认事件
    const ExpressConfirm = (_, values) => {
        // console.log(values)
        if (!values) {
            return false
        }
        setBusexpid(values.value)
        setExpname(values.text)
        setExpshow(false)
    }

    // 数据对象
    const info = React.useRef(
        {
            product: {},
            business: {},
            express: {}
        }
    )

    const getRecovData = async () => {
        let data = {
            id: id
        }

        let result = await React.$Api.OrderRecov(data)

        if (result.code === 1) {
            setFactory(result.data.factory)
            info.current.product = result.data.product
            setExpress(result.data.expData)
            setIndex(result.data.lease.busexpid)
            setBusexpid(result.data.lease.busexpid)
            setBuscode(result.data.lease.busexpcode)

            if (result.data.lease.busexpid) {
                setExpname(result.data.expData[result.data.lease.busexpid - 1].text)
            }
            // for(let item of result.data.expData)
            // {
            //     if(item.value == result.data.lease.busexpid)
            //     {
            //         setExpname(item.text)
            //     }
            // }
        } else {
            React.$Vant.Toast({
                type: 'fail',
                message: result.msg,
                onClose: () => {
                    navigate(-1)
                }
            })

            return false
        }
    }

    React.useEffect(() => {
        getRecovData()
    }, [])

    // 提交归还商品的事件
    const onRecovery = async (values) => {

        if (!busexpid) {
            React.$Vant.Toast.fail('请选择物流公司')
            return false
        }

        if (!buscode) {
            React.$Vant.Toast.fail('请填写物流单号')
            return false
        }

        let data = {
            buscode: buscode,
            busexpid: busexpid,
            id: id,
        }

        let result = await React.$Api.OrderRestore(data)

        if (result.code === 1) {
            React.$Vant.Toast({
                type: 'success',
                message: result.msg,
                onClose: () => {
                    navigate('/order/order/index')
                }
            })
        } else {
            React.$Vant.Toast.fail(result.msg)
            return false
        }
    }

    const onBack = () => {
        navigate(-1)
    }

    // 联系客服
    const onContact = () => {

    }

    return (
        <>
            {/* 导航栏 */}
            <React.$Vant.Sticky>
                <React.$Vant.NavBar
                    title='归还商品'
                    zIndex="10"
                    leftText='返回'
                    onClickLeft={onBack}
                />
            </React.$Vant.Sticky>

            <div className="zy_module_content">
                <div className="swiper-container vip_user_order">
                    <div className="swiper-slide">
                        <ul>
                            <li style={{ borderBottom: 'none' }}>
                                <div className="vip_order_goods">
                                    <h3>
                                        <React.$Router.NavLink to={`/product/product/info?pid=${info.current.proid}`}>
                                            <i><img src={info.current.product.cover_cdn} /></i>
                                            <dl>
                                                <dd>
                                                    <em>厂家联系人：</em>
                                                    <em>{factory.contact}</em>
                                                </dd>
                                                <dd>
                                                    <em>厂家联系电话：</em>
                                                    <em>{factory.tel}</em>
                                                </dd>
                                                <dd>
                                                    <em>归回地址：</em>
                                                    <em>{factory.address}</em>
                                                </dd>
                                            </dl>
                                        </React.$Router.NavLink>
                                    </h3>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div className="lianxi_ge">
                <a onClick={onContact}>联系客服</a>
            </div>
            <div className="rem2"></div>

            <div className='recovery'>

                <React.$Vant.Form form={form} onFinish={onRecovery}>
                    {/* 快递方式 */}
                    <React.$Vant.Form.Item
                        label="快递公司"
                        onClick={() => { setExpshow(true) }}
                        rules={[
                            { required: true, message: '请选择快递公司' }
                        ]}
                        colon
                        isLink
                    >
                        <React.$Vant.Input placeholder="快递公司" isLink readonly value={expname ? expname : ''} />
                    </React.$Vant.Form.Item>

                    <React.$Vant.Popup position="bottom" round visible={expshow} onClose={() => { setExpshow(false) }}>
                        <React.$Vant.Picker
                            ref={picker}
                            title="快递公司"
                            columns={express}
                            onConfirm={ExpressConfirm}
                            onCancel={() => { setExpshow(false) }}
                            defaultValue={index}
                        />
                    </React.$Vant.Popup>

                    {/* 快递单号 */}
                    <React.$Vant.Form.Item
                        label="快递单号"
                        colon
                    >
                        <React.$Vant.Input placeholder="请输入快递单号" value={buscode ? buscode : ''} onChange={setBuscode} />
                    </React.$Vant.Form.Item>

                    <div style={{ width: '90%', margin: '10px auto' }}>
                        <React.$Vant.Button nativeType="submit" block size="normal" type="primary">立即归还</React.$Vant.Button>
                    </div>
                </React.$Vant.Form>


            </div>
        </>
    )
}

export default Recovery